<template>
  <dv-border-box-12 style="height: 100%">
    <div style="padding: 20px 0 10px 20px" class="flex-x">
      <MyTitle :title="'任务号: ' + taskTitle" />
    </div>

    <el-table
      v-adaptive="{
        bottomOffset: 20
      }"
      height="100px"
      :data="taskFeedbackTable"
      size="small"
    >
      <el-table-column
        show-overflow-tooltip
        prop="partNumber"
        label="零件号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.partNumber && scope.row.partNumber.length">
            {{ scope.row.partNumber.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="partName"
        label="零件名称"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.partName && scope.row.partName.length">
            {{ scope.row.partName.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="batchNumber"
        label="批次号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.batchNumber && scope.row.batchNumber.length">
            {{ scope.row.batchNumber.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="processNumber"
        label="工序号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.processNumber && scope.row.processNumber.length">
            {{ scope.row.processNumber.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="realPartCount"
        label="装炉件数"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.realPartCount && scope.row.realPartCount.length">
            {{ scope.row.realPartCount.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="materialMark"
        label="材料牌号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.materialMark && scope.row.materialMark.length">
            {{ scope.row.materialMark.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="craftVersion"
        label="工艺版次"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.craftVersion && scope.row.craftVersion.length">
            {{ scope.row.craftVersion.join(",") }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
    </el-table>
  </dv-border-box-12>
</template>

<script>
import MyTitle from "./DTitle.vue";
export default {
  components: { MyTitle },
  props: {
    taskFeedbackTable: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  computed: {
    // tableData() {
    //   return this.taskFeedbackTable.length
    //     ? this.taskFeedbackTable[0].list
    //     : [];
    // },
    taskTitle() {
      return this.taskFeedbackTable.length
        ? this.taskFeedbackTable[0].taskNumber
        : "--";
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table {
  background-color: transparent !important;
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 4px !important;
    height: 4px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .el-table__empty-text {
    color: #fff;
  }
  tr,
  th {
    color: #fff;
    background-color: transparent !important;
  }
  .el-table__row:hover > td {
    background-color: inherit !important;
  }
  td,
  th.is-leaf {
    border-bottom: 0 !important;
  }
  .el-table__row--striped:hover > td {
    background-color: inherit;
  }
}
</style>
